<!doctype html>
<html lang="zxx">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Home</title>
	<!-- Template CSS -->
	<link rel="stylesheet" href="{{url_for('static',filename='css/style-starter.css')}}">
	<!-- Template CSS -->
	<link href="http://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700&display=swap" rel="stylesheet">
	<!-- Template CSS -->
</head>

<body>
	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
	</script>
	<!--w3l-header-->
	<header class="w3l-header-nav">
		<!--/nav-->
		<nav class="navbar navbar-expand-lg navbar-light px-lg-0 py-0 px-3 stroke">
			<div class="container">
				<h1><a class="navbar-brand" href="#">Mask<span>Identify</span></a></h1>
				<!-- if logo is image enable this   
						<a class="navbar-brand" href="#index.html">
							<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
						</a> -->
				<button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
					data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
					aria-label="Toggle navigation">
					<span class="fa icon-expand fa-bars"></span>
					<span class="fa icon-close fa-times"></span>
				</button>

				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item active">
							<a class="nav-link" href="#">主页</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">静态识别</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">视频识别</a>
						</li>
						
						<li class="nav-item">
							<a class="nav-link" href="#">实时监测</a>
						</li>
					</ul>
					<!--/search-right-->
					<div class="search-right">
						<a href="#search" title="search"><span class="fa fa-search" aria-hidden="true"></span></a>
						<!-- search popup -->
						<div id="search" class="pop-overlay">
							<div class="popup">
                                            <h3 class="hny-title two">Search Here</h3>
								<form action="#" method="post" class="search-box">
									<input type="search" placeholder="Search your Keyword" name="search"
										required="required" autofocus="">
									<button type="submit" class="btn">Search</button>
								</form>

							</div>
							<a class="close" href="#close">×</a>
						</div>
						<!-- /search popup -->
					</div>
					<!--//search-right-->

				</div>
			</div>
		</nav>
		<!--//nav-->
	</header>
	<!-- //w3l-header -->
	<!--banner-slider-->
	<!-- main-slider -->
	<section class="w3l-main-slider" id="home">
		<div class="banner-content">
			<div id="demo-1"
			
				data-zs-src='["{{url_for('static',filename='images/1.jpg')}}","{{url_for('static',filename='images/3.jpg')}}"]'
				data-zs-overlay="dots">
				<div class="demo-inner-content">
					<div class="container">
						<div class="banner-infhny">
							<span>口罩识别系统</span>
							<h3> 对用户是否佩戴口罩进行识别</h3>
							<!--<p class="pr-lg-5">Lorem illum facere aperiam sequi optio consectetur adipisicing
								elitFuga,Ea consequuntur illum
								facere aperiam sequi optio </p>-->

						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- /main-slider -->
	<!-- //banner-slider-->
	<!-- /specification-6-->
	<section class="w3l-specification-6">
		<div class="specification-6-mian py-5" id="Talent">
			<div class="container py-lg-4">
				<div class="row story-6-grids text-left">
					<div class="col-lg-5 story-gd">
						<img src="{{url_for('static',filename='images/r4.jpg')}}" class="img-fluid" alt="/">
					</div>
					<div class="col-lg-7 story-gd pl-lg-4">
						<div class="title-content text-left">
							<h6 class="sub-title">Our Project</h6>
							<h3 class="hny-title">优异的 <br>识别性能</h3>
							<!--<p class="mt-3">Lorem illum facere aperiam sequi optio consectetur adipisicing elitFuga,
								suscipit totam
								animi
								consequatur saepe blanditiis.Lorem ipsum dolor sit amet</p>-->
						</div>
						<div class="skill_info mt-lg-5 mt-4">
							<div class="stats_left">
								<div class="counter_grid">
									<div class="icon_info">
										<p class="counter">94.1</p><p>%</p>
										<h4>Accuracy</h4>

									</div>
								</div>
							</div>
							<div class="stats_left">
								<div class="counter_grid">
									<div class="icon_info">
										<p class="counter">90.3</p><p>%</p>
										<h4>Recall Rates</h4>

									</div>
								</div>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>
	</section>
	<section class="features-4">
		<div class="features4-block py-5">
			<div class="container py-lg-4">
				<div class="title-content text-center mb-lg-5 mt-4">
					<h6 class="sub-title">功能</h6>
					<h3 class="hny-title">我们提供<br>
						三种识别模式</h3>
				</div>
				<div class="row features4-grids text-left mt-lg-4">
					<div class="col-lg-4 col-md-6 features4-grid mt-4">
						<div class="features4-grid-inn">
							<div class="nuber-box">01</div>
							<div class="features4-rightinfo">
									<form action="/face/res" method="post" enctype="multipart/form-data">
										<h5><a href="#URL">静态图片识别</a></h5>
										<p><input type="file" name="img"></p>
										<a class="read"><input type="submit" value="Have a Try!"></a>
									</form>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-md-6 features4-grid mt-4">
						<div class="features4-grid-inn">
							<div class="nuber-box">02</div>
							<div class="features4-rightinfo">
							<form action="/face/res" method="post" enctype="multipart/form-data">
										<h5><a href="#URL">视频识别</a></h5>
										<p><input type="file" name="video"></p>
										<a class="read"><input type="submit" value="Have a Try!"></a>
									</form>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-md-6 features4-grid mt-4">
						<div class="features4-grid-inn">
							<div class="nuber-box">03</div>
							<div class="features4-rightinfo">
							<form action="/face/res" method="post" enctype="multipart/form-data">
										<h5><a href="#URL">实时识别</a></h5>
										<a href="#read" class="read">请下载客户端使用！</a>
									</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
	</section>
	<!-- features-4 -->
	<!--/video-6-->
	<section class="w3l-video-6">
		<div class="container-fluid px-0">
			<div class="history-info position-relative">
				<div class="heading text-center mx-auto">
					<div clas="position-relative">
						<!--popup-->
						<a href="#small-dialog" class="popup-with-zoom-anim play-view text-center position-absolute">
							<span class="video-play-icon">
								<span class="fa fa-play"></span>
							</span>
						</a>
						<!-- dialog itself, mfp-hide class is required to make dialog hidden -->
						<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
							<iframe src="/static/images/v.mp4" frameborder="0"
								allow="autoplay; fullscreen" allowfullscreen></iframe>
						</div>
						<!--//popup-->
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--//video-->

	<!--/blog-grids-home-->
	<section class="bloghny-gds py-5">
		<div class="container py-lg-4" id="highlight">
			<div class="title-content text-left mb-lg-5 mb-4">
				<h6 class="sub-title">特点</h6>
				<h3 class="hny-title">项目亮点</h3>
				<p class="title-para mt-3">本项目具有准确率高、召回率高，抗干扰性强，用户友好等优点。</p>
			</div>
			<div class="row text-left img-grids">
				<div class="col-lg-4 col-md-6 col-sm-12">
					<div class="ser-bg1">
						<div class="p-md-5 p-3">
							<h4><a href="#url">准确率</a></h4>
							<p>使用Pyramidbox人脸检测器实现人脸的检测工作，准确率较高。
 </p>
							<!--<h6>From $99</h6>-->

						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 col-sm-12 mt-md-0 mt-4">
					<div class="ser-bg2">
						<div class="p-md-5 p-3">
							<h4><a href="#url">抗干扰性</a></h4>
							<p>使用WIDER FACE 数据集进行训练，数据量大，训练效果好抗干扰性较强。</p>
							<!--<h6>From $99</h6>-->
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6 col-sm-12 mt-lg-0 mt-4">
					<div class="ser-bg3">
						<div class="p-md-5 p-3">
							<h4><a href="#url">用户友好性</a></h4>
							<p>网页端交互界面实现多终端访问；应用程序可以直接部署到上位机进行使用 </p>
							<!--<h6>From $99</h6>-->
						</div>
					</div>
				</div>
			</div>
			
			<div class="row quote-grids mt-lg-4 mt-5" id="feedback">
				<div class="col-lg-7 quote-info">
					<div class="title-content text-left">
						<h6 class="sub-title">用户反馈</h6>
						<h3 class="hny-title">您的评价让我们更好</h3>
						<p class="mt-3 pr-lg-5">欢迎您指出我们的不足，留下您对该项目改进的宝贵建议</br>
					我们将竭力进行改进</p>
						<a href="#" class="read">请在右侧键入您的宝贵意见</a>
					</div>
				</div>
				<div class="col-lg-5 quote-form-content mt-lg-0 mt-5 pt-lg-2">
					<div class="quote-form p-md-5 p-4 mx-auto mw-100">
						<h4>Request a quote</h4>
						<form action="#" method="post">
							<div class="form-group">
								<input type="text" class="form-control" id="validationDefault01" placeholder="您的名字"
									required="">
							</div>
							<div class="form-group two-girds-fm">
								<input type="text" class="form-control" id="validationDefault02" placeholder="您发现的问题"
									required="">
								
							</div>

							<div class="form-group">
								<textarea name="Comment" class="form-control" placeholder="您的改进意见" required=""
									spellcheck="false"></textarea>
							</div>
							<button type="submit" class="btn submit-quote">Quote Now</button>

						</form>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--//blog-grids-home-->

	
	<!-- /w3l-content-with-photo-4-->

	

	<!-- /w3l-content-with-photo-4-->
	<!-- footer-66 -->
	<footer class="w3l-footer-66">
		<section class="footer-inner-main">
			<div class="footer-hny-grids py-5">
				<div class="container py-lg-4">
					<div class="text-txt">
						<div class="right-side">
							<div class="row sub-columns">
								<div class="col-lg-4 col-md-6 sub-one-left pr-lg-4">
								  <h2><a class="navbar-brand" href="#">MaskIdentify</a></h2>
								  <!-- if logo is image enable this   
										<a class="navbar-brand" href="#index.html">
											<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
										</a> -->
								  <p class="pr-lg-4">为疫情防控竭诚贡献我们的力量</br></br></br> </p>
									<div class="columns-2">
										<ul class="social">
											<li><a href="#QQ"><span class="fa fa-qq"
														aria-hidden="true"></span></a>
											</li>
											<li><a href="#WeChat"><span class="fa fa-wechat"
														aria-hidden="true"></span></a>
											</li>
											
										</ul>
									</div>
								</div>
								<div class="col-lg-4 col-md-6 sub-one-left mid-footer-gd">
									<div class="sub-two-right">
										<h6>Quick links</h6>
										<ul>
											<li><a href="#"><span
														class="fa fa-angle-right mr-2"></span>主页</a>
											</li>
											<li><a href="#"><span
														class="fa fa-angle-right mr-2"></span>静态识别</a>
											</li>
											<li><a href="#"><span
														class="fa fa-angle-right mr-2"></span>视频识别</a></li>
											<li><a href="#"><span
														class="fa fa-angle-right mr-2"></span>实时监测</a></li>
										</ul>
									</div>
									<div class="sub-two-right">
										<h6>Categories</h6>
										<ul>
											<li><a href="#Talent"><span class="fa fa-angle-right mr-2"></span>性能展示</a></li>
											<li><a href="#highlight"><span class="fa fa-angle-right mr-2"></span>项目亮点</a>
											</li>
											<li><a href="#feedback"><span
														class="fa fa-angle-right mr-2"></span>用户反馈</a></li>
											<!--<li><a href="#terms"><span class="fa fa-angle-right mr-2"></span>Vehicle</a>
											</li>-->
										</ul>
									</div>
								</div>
								<div class="col-lg-4 col-md-6 sub-one-left">
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="below-section">
				<div class="container">
					<div class="copyright-footer">
						<div class="columns text-lg-left">
							
						</div>
						<!--<ul class="columns text-lg-right">
							<li><a href="#">Privacy Policy</a>
							</li>
							<li><a href="about.html">About Us</a>
							</li>
							<li><a href="contact.html">Contact Us</a>
							</li>
						</ul>-->
					</div>
				</div>
			</div>
			<!-- copyright -->
			<!-- move top -->
			<button onclick="topFunction()" id="movetop" title="Go to top">
				<span class="fa fa-arrow-up" aria-hidden="true"></span>
			</button>
			<script>
				// When the user scrolls down 20px from the top of the document, show the button
				window.onscroll = function () {
					scrollFunction()
				};

				function scrollFunction() {
					if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
						document.getElementById("movetop").style.display = "block";
					} else {
						document.getElementById("movetop").style.display = "none";
					}
				}

				// When the user clicks on the button, scroll to the top of the document
				function topFunction() {
					document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				}
			</script>
			<!-- /move top -->

		</section>
	</footer>
	<!--//footer-66 -->
</body>

</html>


<script src="{{url_for('static',filename='js/jquery-3.3.1.min.js')}}"></script>
<!-- disable body scroll which navbar is in active -->

<!--//-->
<script>
	$(function () {
		$('.navbar-toggler').click(function () {
			$('body').toggleClass('noscroll');
		})
	});
</script>
<!--/scroll-down-JS-->
<script src="{{url_for('static',filename='js/jquery.min.js')}}"></script>
<script src="{{url_for('static',filename='js/modernizr-2.6.2.min.js')}}"></script>
<script src="{{url_for('static',filename='js/jquery.zoomslider.min.js')}}"></script>
<script src="{{url_for('static',filename='js/jquery.waypoints.min.js')}}"></script>
<script src="{{url_for('static',filename='js/jquery.countup.js')}}"></script>


<script>
	$('.counter').countUp();
</script>
<!-- //stats -->
<!--pop-up-box-->
<script src="{{url_for('static',filename='js/jquery.magnific-popup.min.js')}}"></script>

<script>
	$(document).ready(function () {
		$('.popup-with-zoom-anim').magnificPopup({
			type: 'inline',

			fixedContentPos: false,
			fixedBgPos: true,

			overflowY: 'auto',

			closeBtnInside: true,
			preloader: false,

			midClick: true,
			removalDelay: 300,
			mainClass: 'my-mfp-zoom-in'
		});

		$('.popup-with-move-anim').magnificPopup({
			type: 'inline',

			fixedContentPos: false,
			fixedBgPos: true,

			overflowY: 'auto',

			closeBtnInside: true,
			preloader: false,

			midClick: true,
			removalDelay: 300,
			mainClass: 'my-mfp-slide-bottom'
		});
	});
</script>

<!--//pop-up-box-->
<!-- for blog carousel slider -->
<script src="{{url_for('static',filename='js/owl.carousel1.js')}}"></script>
<script>
	$(document).ready(function () {
		$("#owl-demo1").owlCarousel({
			loop: true,
			margin:20,
			responsiveClass: true,
			responsive: {
				0: {
					items:1,
					nav: true
				},
				600: {
					items: 2,
					nav: false
				},
				1000: {
					items: 3,
					nav: true,
					loop: false
				}
			}
		})
	})
</script>
<!-- //script -->
<script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
